<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Supermap OSM BUildings Draw Data</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
        }
        #toolbar{
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script src="js/OSMBuildings-SuperMap.js"></script>
    <script type="text/javascript">
        var map, layer,polygonLayer,drawPolygon,osm,featureID = 0,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";

        function init(){
            //检测浏览器是否支持canves，Buildings 需要Canvas绘制
            if(!document.createElement('canvas').getContext){
                alert("您的浏览器不支持Canvas,请先升级！");
                return;
            }

            //新建矢量面图层 保存绘制的要素
            polygonLayer = new SuperMap.Layer.Vector("polygonLayer");
            drawPolygon = new SuperMap.Control.DrawFeature(polygonLayer,SuperMap.Handler.Polygon);
            //设置featureadded监听事件
            drawPolygon.events.on({"featureadded":drawCompleted});

            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.MousePosition(),
                    new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Zoom(),
                    drawPolygon
            ]});

            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
            //监听图层信息加载完成事件
            layer.events.on({"layerInitialized":addLayer});
        }

        //异步加载图层
        function addLayer() {
            map.addLayers([layer, polygonLayer]);
            map.setCenter(new SuperMap.LonLat(12957186.36784,4852711.53595), 12);
            //激活多边形绘制
            drawPolygon.activate();
        }


        //Buildings data 初始状态
        var Draw_geojson = {
            "type": "FeatureCollection",
            "features": []
        };

        //绘制完毕
        function drawCompleted(e){
            featureID++;
            var feature={
                "type": "Feature",
                "id": 0,
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                    ]
                },
                "properties": {}
            };
            //feature屬性设置
            feature.id=featureID;
            feature.properties.height = parseInt(document.getElementById("building_maxheight").value);
            feature.properties.minHeight = parseInt(document.getElementById("building_minheight").value);
            feature.properties.wallColor = document.getElementById("building_wallcolor").value;
            feature.properties.roofColor = document.getElementById("building_roofcolor").value;

            //提取e对象中的经纬度 生成feature 保存在Draw_geojson的features中
            var components1=e.feature.geometry.components;
            var geometry_coordinates=[];
            for(var i=0;i<components1.length;i++){
                var components2=components1[i];
                for(var j=0;j<components2.components.length;j++){
                    var component=components2.components[j];
                    var lonlat1=new SuperMap.LonLat(component.x,component.y);
                    //坐标系转换 OSM Buildings 数据坐标必须是 EPSG:4326
                    var lonlat2=lonlat1.transform(new SuperMap.Projection("EPSG:3857"),new SuperMap.Projection("EPSG:4326"));
                    geometry_coordinates.push([lonlat2.lon,lonlat2.lat]);
                }
                //起点终点相同 闭合
                geometry_coordinates.push(geometry_coordinates[0]);
                feature.geometry.coordinates=[geometry_coordinates];
                Draw_geojson.features.push(feature);

                //判断是否已经创建了OSM Buildings图层
                if(map.getLayersByName("OSM Buildings").length){
                    osm.set(Draw_geojson);
                }
                else{
                    osm=new OSMBuildings(map);
                    osm.load();
                    osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
                    osm.set(Draw_geojson);
                    osm.click(function (e) {
                        //Buildings 单击事件 返回当前Building的ID 和 经纬度
                        alert("FeatureID:"+ e.feature);
                    });
                }
            }
        }
    </script>
</head>
<body onLoad = "init()">
<div id="toolbar">
    <span>Building 顶端高度：</span><input type="text" id="building_maxheight" value="50"/>
    <span>Building 底端高度：</span><input type="text" id="building_minheight" value="0"/>
    <br/>
    <span>Building 墙壁颜色：</span><input type="text" id="building_wallcolor" value="#DDDDDD"/>
    <span>Building 顶部颜色：</span><input type="text" id="building_roofcolor" value="#F9F7F4"/>
</div>
<div id = "map"></div>
</body>
</html>